<template>
  <div class="property-line-weight-block">
    <div style="flex">
      <canvas ref="lineBlockCanvas" :width="width" :height="height" />
      <span>{{ label }}</span>
    </div>
    <!-- <el-row :gutter="10" type="flex">
      <el-col :span="14" style="margin:4px 0;">
        <canvas ref="lineBlockCanvas" :width="width" :height="height" />
      </el-col>
      <el-col :span="10">{{ label }}</el-col>
    </el-row>-->
  </div>
</template>

<script>
export default {
  name: 'LineWeightItem',
  props: {
    index: {
      type: Number,
      required: true,
      default: 0
    },
    value: {
      type: String,
      require: true,
      default: '-1'
    },
    label: {
      type: String,
      required: true,
      default: 'ByLayer'
    },
    width: {
      type: Number,
      required: false,
      default: 70
    },
    height: {
      type: Number,
      required: false,
      default: 12
    }
  },
  mounted() {
    // this.$nextTick(() => {
    let height = this.index
    if (height < 1) {
      height = 1
    }
    // 使用canvas绘制不同线宽
    const cxt = this.$refs.lineBlockCanvas.getContext('2d')
    this.drawLine(cxt, height)
    // })
  },
  methods: {
    drawLine(cxt, w) {
      // 绘制线条1
      cxt.beginPath()
      // 设置线宽(看这行)
      cxt.strokeWidth = w
      cxt.strokeStyle = '#000000'
      cxt.moveTo(2, 6.5)
      cxt.lineTo(this.width - 6, 6.5)
      cxt.stroke()
    }
  }
}
</script>

<style lang="scss">
.property-line-weight-block {
  .el-row,
  .el-col {
    height: 12px !important;
    line-height: 12px !important;
    max-height: 12px !important;
    margin: auto 0 !important;
    // text-align: center !important;
    // vertical-align: middle !important;
  }

  display: inline-block;
  padding: 0px;
  height: 12px;
  line-height: 12px;
  max-height: 12px;
}
</style>
